<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>websocket通讯</title>
</head>
<script src="../node_modules/mdbootstrap/js/jquery.min.js"></script>

<body>
<p>【socket开启者的ID信息】：
<div><input id="userName" name="userName" type="text" value="李华"></div>
<p>【客户端向服务器发送的内容】：
<div><input id="toUserId" name="toUserId" type="text" value="20">
    <input id="contentText" name="contentText" type="text" value="hello websocket"></div>
<p>【开启连接】：
<div><a onclick="openSocket()">开启socket</a></div>
<p>【发送信息】：
<div><a onclick="sendMessage()">发送消息</a></div>
<p>【关闭连接】：
<div><a onclick="closeSocket()">关闭socket</a></div>
<p>【发消息】：
<div><a onclick="send1()">发消息</a></div>
<p>【开始连接】：
<div><a onclick="startConn()">开始连接</a></div>
<p>【接入房间】：
<div><a onclick="joinRoom()">接入房间</a></div>


<!DOCTYPE html>





<input type =“text”name=“textie”>





<div id="videoContainer" class="video-container" align="center"></div>

<script>
    let socket;

    var localStream;//本地视频流

    let userName = "";
    const roomName = "101";


    function openSocket() {

        userName = document.getElementById("userName").value;
        const socketUrl = "wss://localhost:8085/websocket/" + userName;
        console.log(socketUrl);
        if (socket != null) {
            socket.close();
            socket = null;
        }
        socket = new WebSocket(socketUrl);
        //打开事件
        socket.onopen = function () {
            console.log("websocket已打开");
        };
        //获得消息事件
        socket.onmessage = function (msg) {
            console.log(msg);
            console.log(msg.data);
            //发现消息进入,开始处理前端触发逻辑
            //在这里处理服务器返回的消息
            const json = JSON.parse(msg.data.toString());
            switch (json.type) {
                case "conn":
                    console.log("收到服务器发回的消息，连接房间成功");
                    break;
                case "room":
                    console.log("收到房间列表信息");
                case "message":
                    console.log("收到他人的消息");

                default:
                    break;
            }


        };
        //关闭事件
        socket.onclose = function () {
            console.log("websocket已关闭");
        };
        //发生了错误事件
        socket.onerror = function () {
            console.log("websocket发生了错误");
        }
    }

    function sendMessage() {

        socket.send('{"toUserId":"' + $("#toUserId").val() + '","contentText":"' + $("#contentText").val() + '"}');
        console.log('{"toUserId":"' + $("#toUserId").val() + '","contentText":"' + $("#contentText").val() + '"}');
    }

    function closeSocket() {
        socket.close();
    }

    function send1() {
        // socket.send('{"type":"conn"}');
        console.log("发送消息中");
        const messageJson = JSON.stringify({
            type: "message",
            roomID: "0000123",
            source : "11",
            messageInfo : "Hello"

        })
        socket.send(messageJson);
    }

    //开始连接
    function startConn() {

        console.log("connent WebSocket is ok");
        const sendJson = JSON.stringify({
            type: "else",
            userName: "张飞",
        });
        socket.send(sendJson); // 注册用户名
    }

    //接入房间
    function joinRoom() {

        // 调取摄像头
        const userConstraints = {
            video: true,
            audio: true,
        };
        // 设置媒体流
        const medias = navigator.mediaDevices.getUserMedia(userConstraints)

        medias
            .then(function (mediaStream) {
                localStream = mediaStream; // 本地视频流
                addUserItem(userName, localStream.id, localStream);
                const str = JSON.stringify({
                    type: "room",
                    roomName: roomName,
                    streamId: localStream.id,
                });
                socket.send(str);
                //roomName.disabled = true;
                //joinRoom.disabled = true;
            })
            .catch(function (e) {
                console.log(JSON.stringify(e));
            });

    }

    // 添加用户,就是将用户的图像框添加到页面里
    function addUserItem(userName, mediaStreamId, src) {
        const div = document.createElement("div");
        div.id = mediaStreamId + "_item";
        div.className = "video-item";
        const span = document.createElement("span");
        span.className = "video-title";
        span.innerHTML = userName;
        div.appendChild(span);
        const video = document.createElement("video");
        video.id = mediaStreamId;
        video.className = "video-play";
        video.controls = true;
        video.autoplay = true;
        video.muted = true;
        video.webkitPlaysinline = true;
        src && (video.srcObject = src);
        div.appendChild(video);

        const videoContainer = document.getElementById("videoContainer"); // 通话列表

        videoContainer.appendChild(div);
    }

</script>

</body>

</html>